<template>
	<view>
		<view style="margin-left: 10px;margin-right: 10px;background: #ebf0f4;">
			<view class="user">
				<view class="portrait-box">
					<!-- 作者头像 -->
					<image class="portrait" :src="article.avatar"></image>
				</view>
				<view class="info-box">
					<text class="username">{{article.nickname}}</text>
					<text class="usertitle">这个家伙太懒，连个签名都没有</text>
				</view>
			</view>
			<view class="article">
				<view>
					<text class="article-title">{{article.article_title}}</text>
				</view>
				<view class="articleInfo" style="height: 18px;border-radius: 5rpx;line-height: 18px;">
					<text class="cuIcon-timefill margin-lr-xs"></text>{{article.add_time | formatTime}}
					<text style="float: right;margin-right: 10px;">
						<text class="cuIcon-share margin-lr-xs"></text>{{article.share_count || 0}}
						<text class="cuIcon-favorfill margin-lr-xs"></text>{{article.collect_length || 0}}
						<text class="cuIcon-messagefill margin-lr-xs"></text>{{commentListLength || 0}}
						<text class="cuIcon-appreciatefill margin-lr-xs"></text>{{article.like_length || 0}}
					</text>
					<!-- <text class="title">{{commentListLength}}人评论 / 发布时间：{{article.add_time | formatTime}}</text> -->
				</view>
				<view class="article-content">
					<rich-text v-html="article.content">
						{{article.content}}
					</rich-text>
					<!-- 			<text v-html="article.content">
					{{article.content}}
				</text> -->
				</view>
			</view>
			<view class="commentdata">
				<view class="listnodata" v-if="commentList.length == 0">
					<image class="nodataimg" lazyLoad="false" :src="noComment"></image>
					<view class="nodatatext">
						<text>&nbsp;&nbsp;&nbsp;</text>还没有评论，快来抢沙发吧！</view>
				</view>
				<view class="commentTitle" v-if="commentList.length != 0">全部评论</view>
				<view class="comment-reply" v-if="commentList">
					<view class="comment-reply-item" v-for="(item,index) in commentList" :key="index">
						<view class="comment-header">
							<view class="comment-header-left">
								<image class="comment-avatar" :src="item.avatar"></image>
								<view class="comment-user-date">
									<text>{{item.nickname}}</text>
									<text>{{item.add_time | formatTime}}</text>
								</view>
							</view>
							<view class="comment-header-right">
								<text></text>
							</view>
						</view>
						<view class="comment-content">
							<text></text> {{item.comment_content}}
							<!-- <view>
							<image></image>
						</view> -->
						</view>
						<!-- <view class="comment-footer">
						<view style="height:1px;background:#f1f1f1;margin-right:20rpx"></view>
					</view> -->
					</view>
				</view>
			</view>
			<view class="bottom" v-if="!addComment">
				<form catchsubmit="formSubmit" report-submit="true">
					<view class="bottom-bar" @click="getopenid()">
						<image class="bottom-btn bottom-back" :src="avatar"></image>
						<view class="bottom-btn bottom-text relative" style="width:400rpx;text-align: center;" @click="addcomment('addComment')">
							<text>输入评论</text>
							<!-- <button wx:if="{{!user}}" class="userLogin" bindgetuserinfo="getProfile" openType="getUserInfo"></button>
							<button wx:else class="userLogin" bindtap="tapcomment"></button> -->
						</view>
						<view class="bottom-btn bottom-comment-container relative">
							<image class="bottom-comment" :src="collect" @click="clickCollect(collect)" style="margin-left: 20rpx;"></image>
							<!-- <button wx:if="{{!user}}" class="userLogin" bindgetuserinfo="getProfile" openType="getUserInfo"></button>
							<!-- <button wx:else class="userLogin" bindtap="bindFavTap"></button> -->
							<!-- </view> -->
							<view class="bottom-btn bottom-comment-container" style="margin-left: 70rpx;margin-top: -8px;">
								<image class="bottom-btn bottom-fav" :src="like" @click="clickLike(like)"></image>
								<!-- <button wx:if="{{!user}}" class="userLogin" bindgetuserinfo="getProfile" openType="getUserInfo"></button> -->
								<!-- <button wx:else class="userLogin" bindtap="bindLikeTap" id="{{detail.id}}"></button> -->
							</view>
							<image :src="share" style="margin-left: 150rpx;" @click="shareClick()"></image>
						</view>
					</view>
				</form>
			</view>
			<view class="zan-actionsheet bottom-bar-iphonex zan-actionsheet--show" v-if="shareshow">
				<view @click="_handleZanActionsheetMaskClick" class="zan-actionsheet__mask"></view>
				<view class="zan-actionsheet__container">
					<button class="zan-btn zan-actionsheet__btn">
						<image class="down-icon" mode="aspectFit" :src="down"></image>
						<text>分享海报图</text>
					</button>
					<button open-type="share" class="zan-btn zan-actionsheet__btn">
						<image class="down-icon" mode="aspectFit" :src="wechat"></image>
						<text>分享给朋友</text>
					</button>
				</view>
			</view>
		</view>
		<view v-if="addComment">
			<!-- capture-catch:touchmove -->
			<view class="textareacontent">
				<form catchsubmit="addComment">
					<input type="text" placeholder="写评论..." v-model="newComment.comment_content" class="comment-input" />
					<view class="textareaBox" style="margin-top: 16px;">
						<!-- <view class="bottom-send" style="margin-right: 210px;">取消</view>
						<button class="bottom-send" style="margin-right: 180px;background-color:#C0C0C0" @click="addcomment('')">取消</button>
						<button wx:if="{{!user}}" class="nopublish" bindgetuserinfo="getProfile" openType="getUserInfo">登录</button> -->
						<button class="bottom-send" @click="addComments()">留言</button>
					</view>
				</form>
			</view>
			<view class="pagemake" @click="addcomment('')"></view>
		</view>
	</view>
</template>

<script>
	// import collect from 'https://wzq0307.com/img/images/images/collect.png';
	// import like from 'https://wzq0307.com/img/images/images/like.png';
	// import liked from 'https://wzq0307.com/img/images/images/liked.png';
	// import share from 'https://wzq0307.com/img/images/images/share.png';
	// import avatar from 'https://wzq0307.com/img/images/images/avatar.png';
	import APP from '../../App.vue';
	export default {
		components: {

		},
		data() {
			return {
				avatar: '',
				nickname: '',
				collect: 'https://wzq0307.com/img/images/images/collect.png',
				like: 'https://wzq0307.com/img/images/images/like.png',
				noComment: 'https://wzq0307.com/img/images/images/message.png',
				share: 'https://wzq0307.com/img/images/images/share.png',
				down: 'https://wzq0307.com/img/images/images/down.svg',
				wechat: 'https://wzq0307.com/img/images/images/wechat.svg',
				shareshow: false,
				article: {},
				newComment: {
					comment_content: ''
				},
				commentList: [],
				addComment: "",
				article_id: 0,
				commentListLength: 0,
				open_id: '',
				shareLength: 0,
				clickShareButton: false,
				// collect_status:0,
				// like_status:0
			}
		},
		onLoad: function(options) {
			console.log("detail", uni.getStorageSync('MyusrInfo'))
			this.avatar = uni.getStorageSync('MyusrInfo').avatarUrl;
			this.nickname=uni.getStorageSync('MyusrInfo').nickName;
			let _this = this;
			this.commentListLength = this.commentListLengths
			console.log(options.article_id)
			this.article_id = options.article_id;
			if (uni.getStorageSync('openid')) {
				_this.open_id = uni.getStorageSync('openid');
			}
			//文章获取
			this.getarticleList(this.article_id);
			uni.request({
				url: 'https://wzq0307.com/api/comment/list/?article_id=' + options.article_id,
				method: 'GET',
				data: {
					// article_id: options.article_id,
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == 0) {
						// _this.page = page;
						_this.commentList = res.data.data.commentList;
						_this.commentListLength = res.data.data.commentList.length;
						// _this.total = res.data.data.total;

					} else {
						// alert("获取文章列表失败，具体信息：" + res.data.message);
						wx.showModal({
							title: '提示',
							content: '出现错误了' + res.date.message,
							success: function(res) {
								if (res.confirm) { //这里是点击了确定以后
									console.log('用户点击确定')
								} else { //这里是点击了取消以后
									console.log('用户点击取消')
								}
							}
						})
					}
					// // 记录在本地
					// uni.setStorageSync("token", datamd5); 
					// uni.setStorageSync("time", data.time);
				},
				fail: function(e) {
					console.log(JSON.stringify(e));
				}

			})
		},
		watch: {
			// 'commentList.length':function(){
			// 	return this.commentList.length
			// }
		},
		filters: {
			formatTime: function(time) { //
				let date = new Date(time * 1000);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				let hour = date.getHours().toString().padStart(2, '0');
				let minute = date.getMinutes().toString().padStart(2, '0');
				let second = date.getSeconds().toString().padStart(2, '0');
				return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			}
		},
		onShow: function() {
			let _this = this;
			// 获取当前小程序的页面栈
			let pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			let currentPage = pages[pages.length - 1];
			// 打印出当前页面中的 options
			// console.log(currentPage.options)                //正常打印出 options 值
			_this.article_id = currentPage.options.article_id;
			console.log("wwww", _this.open_id, _this.article_id)
			if (uni.getStorageSync('MyusrInfo')) {
				this.getLikeOrCollectInfo(_this.open_id, _this.article_id);
			}
			if (this.open_id && this.clickShareButton) {
				console.log(this.clickShareButton, "按钮或右上角分享成功")
				uni.request({
					url:'https://wzq0307.com/api/share/add/',
					data:{
						article_id:_this.article_id,
						open_id:_this.open_id
					},
					method:'GET',
					success: (res) => {
						this.getarticleList(this.article_id);
					}
				})
			}
		},
		//监听用户点击右上角分享
		onShareAppMessage: function(res) {
			let _this = this;
			if (res) { // 来自页面内分享按钮和右上角分享按钮 res.from === 'menu'.from === 'button'
				console.log("分享", res)
				_this.clickShareButton = true;
			}
			return {
				title: this.article_title,
				path: '/pages/detail/detail?article_id=' + this.article_id,
				imageUrl: this.article.cover_image
			}
		},
		//监听用户点击右上角转发到朋友圈
		onShareTimeline: function() {
			return {
				title: this.article_title,
				query: '/pages/detail/detail?article_id=' + this.article_id,
				imageUrl: this.article.cover_image,
				shareLength: this.shareLength + 1
			}

		},
		//监听用户点击右上角收藏
		onAddToFavorites: function(res) {
			// webview 页面返回 webViewUrl
			console.log('webViewUrl: ', res.webViewUrl)
			return {
				title: this.article_title,
				imageUrl: this.article.cover_image,
				query: '/pages/detail/detail?article_id=' + this.article_id
			}
		},
		methods: {
			getLikeOrCollectInfo: function(openId, articleId) {
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/Collect/findCollect/',
					data: {
						open_id: openId,
						article_id: articleId
					},
					method: 'get',
					success: (res) => {
						// console.log('get',res.data.data.result.collect_status)
						if (res.data.status == 0) {
							if (res.data.data.result.collect_status == 2) {
								_this.collect = 'https://wzq0307.com/img/images/images/collect.png';
							} else {
								_this.collect = 'https://wzq0307.com/img/images/images/collected.png';
							}
						} else {
							_this.collect = 'https://wzq0307.com/img/images/images/collect.png'
						}

					}
				})
				uni.request({
					url: 'https://wzq0307.com/api/Good/findlike/',
					data: {
						open_id: _this.open_id,
						article_id: _this.article_id
					},
					method: 'get',
					success: (res) => {
						// console.log('get1',res.data.data.result.like_status)
						// console.log(res)
						if (res.data.status == 0) {
							if (res.data.data.result.like_status == 2) {
								_this.like = 'https://wzq0307.com/img/images/images/like.png';
							} else {
								_this.like = 'https://wzq0307.com/img/images/images/liked.png';
							}
						} else {
							_this.like = 'https://wzq0307.com/img/images/images/like.png';
						}

					}
				})
			},
			getarticleList: function(article_id) {
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/article/detail/?article_id=' + article_id,
					method: 'GET',
					data: {
						// article_id: options.article_id,
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							// _this.page = page;
							_this.article = res.data.data.article;
							// _this.total = res.data.data.total;

						} else {
							// alert("获取文章列表失败，具体信息：" + res.data.message);
						}

						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}

				})
			},
			getopenid: function() {
				let _this = this;
				if (!uni.getStorageSync('MyusrInfo')) {
					uni.navigateTo({
						url: '../my/my',
						events: {
							// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
							acceptDataFromOpenedPage: function(data) {
								console.log("获取被打开页面传送到当前页面的数据", data.data)
								_this.nickname = data.data.MyusrInfo.nickName;
								_this.avatar = data.data.MyusrInfo.avatarUrl;
								_this.open_id = data.data.openid;
							}
						},
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenerPage', {
								data: 'test'
							})
						}
					})

				}
			},
			addcomment: function(value) {
				if (!uni.getStorageSync('MyusrInfo')) {
					// uni.navigateTo({
					// 	url: '../my/my'
					// })
				} else {
					this.addComment = value
				}
			},
			clickLike: function(value) {
				let _this = this;
				if (!uni.getStorageSync('MyusrInfo')) {
					uni.navigateTo({
						url: '../my/my'
					})
				} else {
					if (uni.getStorageSync('openid')) {
						_this.open_id = uni.getStorageSync('openid');
					}

					if (value == 'https://wzq0307.com/img/images/images/like.png') {
						this.like = 'https://wzq0307.com/img/images/images/liked.png'
					} else {
						this.like = 'https://wzq0307.com/img/images/images/like.png'
					}
					uni.request({
						url: 'https://wzq0307.com/api/Good/updtlike/',
						data: {
							open_id: _this.open_id,
							article_id: _this.article.article_id
						},
						method: 'get',
						success: (res) => {
							if (res.data.status == 0) {
								if (_this.like == 'https://wzq0307.com/img/images/images/like.png') {
									uni.showToast({
										title: '取消点赞!',
										icon: 'success',
										duration: 900,
									})
								} else {
									uni.showToast({
										title: '谢谢点赞!',
										icon: 'success',
										duration: 900,
									})
								}
								_this.getarticleList(_this.article_id);
							}
						}
					})
				}

			},
			clickCollect: function(value) {
				let _this = this;
				if (!uni.getStorageSync('MyusrInfo')) {
					uni.navigateTo({
						url: '../my/my'
					})
				} else {
					if (value == 'https://wzq0307.com/img/images/images/collect.png') {
						this.collect = 'https://wzq0307.com/img/images/images/collected.png'
					} else {
						this.collect = 'https://wzq0307.com/img/images/images/collect.png'
					}

					uni.request({
						url: 'https://wzq0307.com/api/Collect/updtcollect/',
						data: {
							open_id: _this.open_id,
							article_id: _this.article.article_id
						},
						method: 'get',
						success: (res) => {
							if (res.data.status == 0) {
								if (_this.collect == 'https://wzq0307.com/img/images/images/collect.png') {
									uni.showToast({
										title: '取消收藏!',
										icon: 'success',
										duration: 900,
									})
								} else {
									uni.showToast({
										title: '加入收藏!',
										icon: 'success',
										duration: 900,
									})
								}
								_this.getarticleList(_this.article_id);
							}
						}
					})
				}

			},
			shareClick: function() {
				this.shareshow = true
			},
			_handleZanActionsheetMaskClick: function() {
				this.shareshow = false
			},
			addComments: function() {
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/comment/add/',
					method: 'GET',
					data: {
						// article_id: options.article_id,
						avatar: _this.avatar,
						comment_content: _this.newComment.comment_content,
						article_id: _this.article_id,
						nickname: _this.nickname
					},
					success: (res) => {
						console.log('00000',res);
						if (res.data.status == 0) {
							_this.commentList.unshift(res.data.data.comment);
							_this.commentListLength = _this.commentList.length;
							_this.newComment.comment_content = "";
							_this.newComment.nickname = "";
							_this.newComment.email = "";
							_this.addComment = '';
							// _this.newComment.comment_content="";
						} else {
							// alert("获取文章列表失败，具体信息：" + res.data.message);
							wx.showModal({
								title: '提示',
								content: '出现错误了',
								success: function(res) {
									if (res.confirm) { //这里是点击了确定以后
										console.log('用户点击确定')
									} else { //这里是点击了取消以后
										console.log('用户点击取消')
									}
								}
							})
						}

						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}

				})
			}
		}
	}
</script>

<style>
	/* pages/detail/detail.wxss */
	@import "../../wxParse/wxParse.wxss";
	@import "../../wxParse/icon.wxss";

	.flex {
		display: flex;
	}

	@-webkit-keyframes infinite-move {
		from {
			opacity: 1;
			transform: translateX(0);
		}

		to {
			opacity: 0.6;
			transform: translateX(6rpx);
		}
	}

	@keyframes infinite-move {
		from {
			opacity: 1;
			transform: translateX(0);
		}

		to {
			opacity: 0.6;
			transform: translateX(6rpx);
		}
	}

	.icons {
		padding-right: 20rpx;
	}

	.topic-detail {
		height: 100vh;
		background: transparent;
		-webkit-overflow-scrolling: touch;
	}

	.topic-detail .topic-header {
		position: relative;
		width: 100%;
	}

	.topic-detail .topic-header .topic-banner {
		display: block;
		width: 100%;
		height: 420rpx;
	}

	.topic-detail .topic-header .topic-review {
		padding: 26rpx 80rpx 80rpx;
		font-size: 30rpx;
	}

	.topic-detail .topic-header .topic-review text {
		display: block;
		text-align: justify;
		line-height: 60rpx;
	}

	.topic-detail .topic-subtitle {
		margin-top: 56rpx;
		padding: 0 32rpx;
		font-size: 36rpx;
		font-weight: 700;
		color: #3b3b3b;
		line-height: 60rpx;
	}

	.topic-detail .topic-subtitle.short-margin {
		margin-top: 36rpx;
		margin-bottom: 24rpx;
	}

	.topic-detail .topic-title {
		margin-top: 80rpx;
		padding: 0 32rpx;
		font-size: 44rpx;
		font-weight: 700;
		color: #3b3b3b;
		line-height: 52rpx;
	}

	.topic-detail .topic-title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 80rpx;
	}

	.topic-detail .topic-title-wrapper .topic-title {
		margin-top: 0;
	}

	.topic-detail .topic-title-wrapper .onlooker-amount {
		position: relative;
		right: 0;
		bottom: 0;
		padding: 6rpx 8rpx 8rpx 18rpx;
		background: #565656;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: #fff;
	}

	.topic-detail .topic-title-wrapper .onlooker-amount .onlooker-arrow {
		animation: infinite-move 0.8s linear infinite alternate;
		display: inline-block;
		margin: 0 8rpx;
	}

	.topic-detail .vote-amount,
	.topic-detail .all-comments-count {
		padding: 0 32rpx;
		font-size: 28rpx;
		color: #ababab;
		line-height: 34rpx;
	}

	.topic-detail .vote-wrapper {
		display: flex;
		justify-content: space-between;
		margin-top: 26rpx;
		padding: 0 32rpx;
	}

	.topic-detail .vote-share {
		margin: 14rpx 32rpx 14rpx 32rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.topic-detail .editor {
		margin: 48rpx 32rpx 64rpx;
		font-size: 28rpx;
		font-weight: normal;
		color: #ababab;
		line-height: 34rpx;
	}

	.topic-detail .comment-counts {
		font-size: 28rpx;
		font-weight: normal;
		color: #00abff;
		text-align: right;
		line-height: 30rpx;
	}

	.topic-detail .all-comments {
		position: relative;
		padding: 8rpx 32rpx;
		font-size: 24rpx;
		font-weight: normal;
		color: #ababab;
		line-height: 34rpx;
	}

	.topic-detail .all-comments .all-comments-btn {
		position: absolute;
		right: 32rpx;
	}

	.topic-detail .comments-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 0 40rpx 0 56rpx;
		font-size: 32rpx;
	}

	.topic-detail .comments-title::before {
		transform: scale(0.6);
		position: absolute;
		top: 0;
		left: 32rpx;
		height: 100%;
		width: 8rpx;
		background: #fd4843;
		content: '';
	}

	.topic-detail .comments-wrapper {
		padding: 0 0 64rpx;
	}

	.topic-detail .comments-wrapper .comment-item {
		margin: 0;
		border-bottom: 1rpx solid rgba(230, 230, 230, 0.8);
	}

	.topic-detail .comments-wrapper .comment-share {
		padding: 32rpx;
		font-size: 28rpx;
		font-weight: normal;
		color: #ababab;
		line-height: 34rpx;
		text-align: center;
	}

	.topic-detail .comment-list {
		padding: 0 0 24rpx;
	}

	.topic-detail .comment-list .comment-item {
		margin: 0;
		border-bottom: 1rpx solid rgba(230, 230, 230, 0.8);
	}

	.topic-detail.prevent-scroll {
		height: 100%;
		overflow: hidden;
	}

	.add-margin-top {
		margin-top: 10rpx;
	}

	.add-distance {
		margin-top: 162rpx;
	}

	.article-info {
		background: #fff;
		padding-top: 60rpx;
		margin: 0rpx 10rpx 40rpx 30rpx;
		border-radius: 15rpx;
	}

	.article-info .avator {
		margin-right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.article-info .article-info__category {
		margin-top: 30rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}

	.article-info .article-info__category .category {
		font-weight: 700;
		font-family: PingFangSC-Medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #f13b03;
	}

	.article-info .article-info__category i {
		display: inline-block;
		width: 3rpx;
		height: 32rpx;
		background: #eee;
		margin: 0 20rpx;
		vertical-align: middle;
	}

	.article-info .article-info__category .time {
		font-weight: 400;
		font-family: PingFangSC-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #7d7d7d;
	}

	.article-info .title {
		font-weight: 700;
		font-family: PingFangSC-Medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 40rpx;
		line-height: 40rpx;
	}

	.entry-content {
		clear: both;
		color: #404246;
		margin: 0;
		padding: 0 30rpx;
		font-size: 32rpx;
		line-height: 68rpx;
		letter-spacing: 2rpx;
		text-align: justify;
		word-wrap: break-word;
		word-break: normal;
		font-family: PingFangSC-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.entry-content video {
		width: 100% !important;
	}

	.entry-content image {
		width: 100% !important;
	}

	/*评论*/

	.relatedTitle {
		text-align: left;
		padding: 20rpx 30rpx 20rpx;
		font-weight: bold;
		line-height: 40rpx;
		font-size: 36rpx;
		color: #4c4c4c !important;
	}

	.relatedText {
		text-align: left;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 60rpx;
		color: #4c4c4c !important;
	}

	.commentheader {
		padding: 20rpx;
		text-align: left;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #959595;
	}

	.listnodata {
		height: 446rpx;
		text-align: center;
	}

	.listnodata .nodataimg {
		width: 297rpx;
		height: 220rpx;
	}

	.listnodata .nodatatext {
		font-size: 26rpx;
		color: #999;
		margin-top: 30rpx;
	}

	.comment-reply {
		margin-left: 30rpx;
		padding-bottom: 80rpx;
	}

	.comment-reply-title {
		font-size: 40rpx;
		line-height: 1.5;
		color: #3ec382;
	}

	.comment-reply-item {
		margin-bottom: 40rpx;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.comment-header-left {
		display: flex;
		align-items: center;
	}

	.comment-avatar {
		display: inline-block;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.comment-user-date {
		display: flex;
		flex-direction: column;
	}

	.comment-user-date text:first-child {
		font-size: 30rpx;
		font-weight: bold;
		color: #7d7d7d;
	}

	.comment-user-date text:last-child {
		font-size: 22rpx;
		color: #a8a8a8;
	}

	.comment-header-right {
		display: flex;
		align-items: center;
	}

	.comment-header-right text {
		font-size: 28rpx;
		padding-right: 30rpx;
		text-shadow: 0px 0px #3a3a3a;
	}

	.comment-vote-btn {
		position: relative;
		display: flex;
		align-items: center;
	}

	.comment-header-right .comment-vote-btn:first-child {
		margin-right: 34rpx;
	}

	.comment-vote-btn text {
		display: inline-block;
		font-size: 24rpx;
		color: #a8a8a8;
		border: 10rpx solid transparent;
		border-right: 0;
	}

	.vote-count-actived {
		color: #f13b03 !important;
	}

	.comment-vote-btn image {
		display: inline-block;
		width: 20rpx;
		height: 18rpx;
		border: 10rpx solid transparent;
	}

	.comment-vote-btn .transparent-login-btn {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.comment-content {
		position: relative;
		margin: 20rpx 20rpx 30rpx 80rpx;
		font-size: 30rpx;
		color: #3a3a3a;
	}

	.comment-content text {
		color: #a8a8a8;
	}

	.replay-content {
		margin-left: 80rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		background: #f5f5f5;
		border-radius: 10rpx;
	}

	.replay-user {
		align-items: center;
		/* height: 80rpx; */
		font-size: 26rpx;
		/* line-height: 80rpx; */
		font-weight: normal;
		outline: none;
		color: #4c4c4c;
		margin: 10rpx 0;
		margin-left: 40rpx;
		margin-right: 40rpx;
		padding: 20rpx 0rpx;
	}

	.commentdata {
		padding: 14px 8px 10px 8px;
		background: #FFFFFF;
		margin: 10px 0px;
		border-radius: 10px;
	}

	/* 底部菜单 */

	.bottom-bar {
		position: fixed;
		width: 100%;
		line-height: 100rpx;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		background: #f8f9fb;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bottom-bar-iphonex {
		padding-bottom: 68rpx;
	}

	.bottom-bar .bottom-btn {
		margin: auto 0;
		width: 85rpx;
		height: 85rpx;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
	}


	.bottom-bar .bottom-text {
		background: #ebf0f4;
		margin: auto 0 auto 10rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		width: 260rpx;
		color: #95989d;
		padding: 0 30rpx;
		font-size: 30rpx;
	}

	.bottom-bar .bottom-comment-container {
		width: 85rpx;
		padding: 20rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
		overflow: visible;
		position: relative;
	}

	.bottom-bar .bottom-comment-container image {
		position: absolute;
		width: 85rpx;
		height: 85rpx;
		padding: 20rpx;
		box-sizing: border-box;
		top: 0;
		left: 0;
		margin: 0;
	}

	.bottom-comment-count {
		text-align: left;
		font-size: 18rpx;
		position: absolute;
		top: 17rpx;
		left: 48rpx;
		height: 20rpx;
		line-height: 20rpx;
		color: #4782ff;
		white-space: nowrap;
	}

	.bottom-bar .bottom-fav {
		margin-left: 37rpx;
	}

	.bottom-bar .bottom-share image {
		width: 45rpx;
		height: 45rpx;
		box-sizing: border-box;
	}

	.bottom-bar .bottom-share {
		border: none;
	}

	button::after {
		border-radius: 0;
		border: none;
	}

	.btn-clear-style {
		border-color: #fff;
		background: transparent;
		padding: 0;
		padding-left: 0;
		padding-right: 0;
		margin: 0;
		border-radius: 0;
		display: flex;
		text-align: left;
		line-height: normal;
	}

	.btn-clear-style::after {
		border: none !important;
	}

	/* 评论框 */

	.textareacontent {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 55%;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		background-color: #fff;
		z-index: 10;
	}

	.comment-input {
		/* background: #C0C0C0; */
		background: #ebf0f4;
		width: 80%;
		height: 62px;
		padding-bottom: 40px;
		padding-left: 4px;
		border-radius: 5px;
		margin: 16px 10px;
		color: #000000;
		display: block;
		float: left;
		font-size: 30rpx;
	}

	.textareaBox {
		display: block;
		float: left;
	}

	.bottom-send {
		margin-top: 33px;
		text-align: center;
		width: 90rpx;
		height: 70rpx;
		background: #C0C0C0;
		font-size: 20rpx;
		/* margin: auto 0 auto 20rpx; */
		color: #fff;
		font-size: 13px;
		border-radius: 14rpx;
	}

	.textareacontent .textheaders {
		width: 100%;
		height: 96rpx;
		/* border-bottom: 1rpx solid #eaeaea; */
	}

	.textareacontent .textheaders .cancel {
		color: #333;
		font-size: 32rpx;
		line-height: 96rpx;
		margin-left: 32rpx;
		float: left;
	}

	.textareacontent .textheaders .publish {
		color: #3ec382;
		font-size: 32rpx;
		line-height: 96rpx;
		margin-right: 32rpx;
		float: right;
	}

	.textareacontent .textheaders .nopublish {
		color: #999;
		font-size: 32rpx;
		line-height: 96rpx;
		margin-right: 32rpx;
		float: right;
	}

	.textNum {
		position: absolute;
		font-size: 26rpx;
		color: #999;
		right: 32rpx;
		top: 10rpx;
	}

	.textareacontent .textareaInput {
		width: 686rpx;
		padding: 32rpx 32rpx 42rpx 32rpx;
		height: 286rpx;
		font-size: 34rpx;
		line-height: 65rpx;
	}

	.textareaInput.hide {
		display: none;
	}

	.pagemake {
		background-color: #000;
		opacity: 0.8;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
	}

	button {
		padding: 0;
		margin: 0;
		border-radius: 0;
		background-color: transparent;
	}

	.bottom-modal-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.zan-actionsheet {
		background-color: #f8f8f8;
	}

	.zan-actionsheet__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background: rgba(0, 0, 0, 0);
		display: none;
	}

	.zan-actionsheet__container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f8f8f8;
		transform: translate3d(0, 50%, 0);
		transform-origin: center;
		transition: all 0.2s ease;
		z-index: 1001;
		opacity: 0;
		visibility: hidden;
		box-shadow: 0 -1px 6px 0 rgba(132, 131, 123, 0.12);
		display: flex;
	}

	.zan-actionsheet__btn.zan-btn {
		height: 146rpx;
		line-height: 60rpx;
		margin-bottom: 0;
		flex-grow: 1;
		font-size: 24rpx;
	}

	.zan-actionsheet__btn.zan-btn::after {
		border-width: 0;
		border-bottom-width: 1px;
	}

	.zan-actionsheet__btn.zan-btn:last-child::after {
		border-bottom-width: 0;
	}

	.zan-actionsheet__subname {
		margin-left: 2px;
		font-size: 12px;
		color: #666;
	}

	.zan-actionsheet__footer {
		margin-top: 10px;
	}

	.zan-actionsheet__btn.zan-btn--loading .zan-actionsheet__subname {
		color: transparent;
	}

	.zan-actionsheet--show .zan-actionsheet__container {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.zan-actionsheet--show .zan-actionsheet__mask {
		display: block;
	}

	.zan-btn--loading .down-icon,
	.zan-btn--loading .wc-icon {
		opacity: 0;
	}

	.down-icon,
	.wc-icon {
		height: 40rpx;
		display: block;
		margin: 30rpx auto 0;
	}

	.down-icon {
		width: 36rpx;
	}

	.wc-icon {
		width: 52rpx;
	}

	.zan-colum-container {
		display: block;
	}

	.zan-colum-container .zan-actionsheet__btn.zan-btn {
		line-height: 146rpx;
		font-size: 36rpx;
	}

	.canvas {
		position: fixed;
		top: 999999rpx;
		left: 0;
	}

	.portrait-box {
		display: inline;
		float: left;
		margin-left: 10px;
	}

	.portrait {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.info-box {
		display: inline;
		float: left;
		margin-left: 10px;
		margin-top: 5px;
	}

	.user {
		display: inline-block;
		background: #FFFFFF;
		border-radius: 10px;
		padding: 14px 8px 10px 8px;
		margin-top: 10px;
		width: 100%;
	}

	.username {
		display: block;
		font-size: 15px;
		text-shadow: 0px 0px #000;
	}

	.usertitle {
		font-size: 10px;
		color: #C0C0C0;
	}

	.article {
		margin-top: 10px;
		background: #FFFFFF;
		border-radius: 10px;
		margin: 10px 0px;
		padding: 14px 8px 30px 8px;
	}

	.article-title {
		margin-top: 20px;
		text-shadow: 0px 0px #000;
		font-size: 17px;
		text-align: center;
	}

	.articleInfo {
		margin-top: 10px;
	}

	.title {
		font-size: 14px;
		color: #C0C0C0;
	}

	.article-content {
		margin-top: 10px;
		font-size: 14px;
	}

	.commentTitle {
		text-shadow: 0px 0px #000;
		font-size: 16px;
		margin: 8px 0px 24px 10px;
	}
</style>
